﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>VEToolkit jQuery v6.2.040809.1624</title>
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scripts/jquery.virtualearth.js"></script>
    <script type="text/javascript">
        /* ************************************************************************************ */
        /* VEToolkit jQuery v6.2.040809.1624 - http://codeplex.com/VEToolkit                    */
        /* Copyright (C) 2009 Chris Pietschmann (http://pietschsoft.com). All Rights Reserved.  */
        /* This project is licensed under the Microsoft Public License (Ms-PL)                  */
        /* This license can be found here: http://www.codeplex.com/VEToolkit/license            */
        /* ************************************************************************************ */
        
        // Load the VEMap once the page has finished loading
        $(window).ready(function() {
            $("#myMap").veMap({
                latlong: new VELatLong(44, -78), // A VELatLong Class object that represents the center of the map. Optional.
                zoom: 6,                        // The zoom level to display. Valid values range from 1 through 19. Optional. Default is 4.
                style: VEMapStyle.Hybrid,       // A VEMapStyle Enumeration value specifying the map style. Optional. Default is VEMapStyle.Road.
                fixed: false,                   // A Boolean value that specifies whether the map view is displayed as a fixed map that the user cannot change. Optional. Default is false.
                mode: VEMapMode.Mode2D,         // A VEMapMode Enumeration value that specifies whether to load the map in 2D or 3D mode. Optional. Default is VEMapMode.Mode2D.
                showSwitch: true,               // A Boolean value that specifies whether to show the map mode switch on the dashboard control. Optional. Default is true (the switch is displayed).
                tileBuffer: 0,                  // How much tile buffer to use when loading map. Default is 0 (do not load an extra boundary of tiles). This parameter is ignored in 3D mode.
                mapOptions: (function() {        // A VEMapOptions Class that specifies other map options to set.
                    var opt = new VEMapOptions();
                    opt.LoadBaseTiles = true;
                    return opt;
                })()
            })
            .veMapAttachEvent("onmousemove", VEMap_MouseMoveDelegate); // Attach the "onmousemove" event to the VEMap_MouseMoveDelegate method defined below.
            
        });

        // This is the "delegate" that will be called directly by the "onmousemove" event.
        function VEMap_MouseMoveDelegate(e) {
            // Call the Event handler method, and pass it both the jQuery object and VEMapEvent object.
            VEMap_MouseMoveHandler($("#myMap"), e);
        };

        // This is the Event Handler method for the "onmousemove" event.
        function VEMap_MouseMoveHandler(jquery, e) {
            // Get a reference to the VEMap object
            var map = jquery.veMapGet();

            // Get the Lat/Long location of the Mouse
            var mouseLatLong = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));

            // Display the Current Location (Lat/Long) of the Mouse next to the VEMap
            $("#lblCurrentLocation").html("Lat: " + mouseLatLong.Latitude + "<br/>Long: " + mouseLatLong.Longitude);
        }
    </script>
</head>
<body>
    <input type="button" onclick="$('#myMap').veMapExec(function(map){ map.ZoomIn(); });" value="Zoom In" />
    <table>
        <tr>
            <td>
                <div id='myMap' style="position:relative; width:400px; height:400px;"></div>        
            </td>
            <td valign="top">
                <div id='lblCurrentLocation'></div>
            </td>
        </tr>
    </table>
    <br />
    <input type="button" onclick="$('#myMap').veMapDetachEvent('onmousemove', VEMap_MouseMoveDelegate);" value="Detach 'onmousemove' Event" />
    

</body>
</html>
